<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>


<!DOCTYPE html>
<html>
<@layout.head title="资产使用管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
<style>
    .showImagBox {
        position: relative;
    }

    .showImag {
        display: block;
        background-color: #efefef;
        margin: 3px;
        max-width: 100%;
        height: 190px;
        position: relative;
    }

    .showImagBox img {
        max-width: 100%;
        min-height: 100px;
    }

    .showImagBox img:before {
        content: "点击上传";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-left: 2px solid #d9d9d9;
        color: #ccc;
        width: 160px;
        font-size: 1.4em;
        line-height: 39.5px;
        text-align: center;
        background-color: transparent;
    }

    .showImagBox img:after {
        left: calc(50% - 80px);
        content: " ";
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #d9d9d9;
        width: 39.5px;
        height: 2px;
    }

    body, html {
        background: none;
    }

    .imgButton {
        width: 100%;
        height: 40px;
        text-align: center;
        display: flex;
    }

    .imgButton span {
        flex: 1;
        margin: 0px 30px;
        display: block;
        font-size: 16px;
        line-height: 40px;
        background-color: #0ACD74;
        color: #fff;
        padding: 0px 50px;
        border-radius: 20px;
    }
</style>
<script src="${request.contextPath}/assets/js/myImgTool.js?v=3653060703"></script>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <div class="content">
        <div style="position: relative;top:50px;">
            <@dataTables.commonTable id="mainTable"/>
        </div>
        <div id="searchGroup" class="btn-group"
             style="position: absolute;top:10px;display: flex;width:calc(100% - 15px);">

            <div style="flex:3;" id="orgBox">

            </div>

            <div style="flex:1; display: flex">
                <select class='form-control' id='useTypes'
                        style='float:left; flex: 1;min-width: 150px'>
                    <option value="0">选择使用方式</option>
                    <#list useType as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
                <select class='form-control' id='brand'
                        style='float:left; flex: 1;min-width: 100px'>
                    <option value="0">选择品牌</option>
                    <#list brand as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
            </div>

            <div style="flex:1;">
                <select class='form-control' id='types1' placeholder='请选择一级分类'
                        style='width:100%;' onchange="typesChange()">
                    <option value='0'>请选择一级分类-0</option>
                    <#list eqRootClass as item>
                        <option value="${item.id?c}">${item.name}-${item.code}</option>
                    </#list>
                </select>
            </div>
            <div style="flex:1;" id='types2Box'>
            </div>
            <div>
                <input id="name" name="name" placeholder='型号名称/编码/二维码'
                       style=" flex: 1"/>
            </div>

        </div>
        <div>
            <div style="position: absolute;top: 50px">
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:refreshData();">
                    <i class="fa fa-search"></i> 查询
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:newdetail();">
                    <i class="fa fa-plus"></i> 新增
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:editdetail();">
                    <i class="fa fa-edit"></i> 修改
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:deldetail();">
                    <i class="fa fa-minus"></i> 删除
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:showMobile();">
                    <i class="fa fa-mobile"></i> 预览手机端
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:exportQRcode();">
                    <i class="fa fa-qrcode"></i> 导出二维码图片
                </button>

            </div>
            <!-- 按钮 -->
            <!-- 表格 -->

        </div>
    </div>

    <!-- 弹出窗 -->
    <@modal.editModal id="modal-detail" buttonId="btndetailSave" width="1000px" height="100px">
        <@mform.container  id="editForm" width="450px">
            <input id="id" name="id" type="hidden"/>
            <input id="changeId" name="changeId" type="hidden"/>
            <@mform.select2 id='organizationId' name='organizationId' label="使用机构"  size=12>
                <option value="">请选择机构</option>
            </@mform.select2>
            <@mform.input_text id='usePosition' name='usePosition' size=12 label='使用位置' placeholder='使用位置' icon='fa-edit' />
            <@mform.row>
                <@mform.select2 id='useStaffId' name='useStaffId' label="使用人"  size=6>
                    <option value="">请选择使用人</option>
                    <#list staffList as item>
                        <option value="${item.id?c}">${item.name+" "+item.telephone+"-"+item.roomNo?default('无房号')}</option>
                    </#list>
                </@mform.select2>
                <@mform.select2 id='useType' name='useType' label="使用方式"  size=6 >
                    <#list useType as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </@mform.select2>
            </@mform.row>
            <@mform.row>
                <@mform.input_text id='buyTime' name='buyTime' size=6 label='领用时间' placeholder='领用时间' icon='fa-edit' />
                <@mform.select2 id='secrecy' name='secrecy' label="密保级别"  size=6>
                    <#list secrecy as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </@mform.select2>
            </@mform.row>
            <@mform.row>
                <@mform.select2 id='oneCode' name='oneCode' label="资产类型"  size=6>
                    <option value="">请选择资产</option>
                    <#list eqClass as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </@mform.select2>
                <@mform.select2 id='brandCode' name='brandCode' label="品牌"  size=6>
                    <option value="">请选择品牌</option>
                    <#list brand as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </@mform.select2>
            </@mform.row>
            <@mform.select2 id='modelId' name='modelId' label="型号名称"  size=12>
                <option value="">请选择型号</option>
            </@mform.select2>
            <@mform.input_text id='barCode' name='barCode' size=12 label='资产条形码' placeholder='资产条形码' icon='fa-edit' />
            <@mform.input_text id='configurationDescription' name='configurationDescription' size=12 label='资产配置' placeholder='资产配置' icon='fa-edit' />
            <@mform.select2 id='QRCode' name='QRCode' label="分配二维码"  size=12>
                <option value="-1">动态生成二维码</option>
                <#list QRcode as item>
                    <option value="${item.id?c}">${item.code}</option>
                </#list>
            </@mform.select2>
            <@mform.input_text id='certCode' name='certCode' size=12 label='资产身份码' placeholder='资产身份码' icon='fa-edit' />
            <@mform.row>
                <@mform.select2 id='warehouseId' name='warehouseId' label="仓库来源"  size=6>
                    <#list warehouseList as item>
                        <option value="${item.id?c}">${item.name}</option>
                    </#list>
                </@mform.select2>
                <@mform.input_text id='changeCode' name='changeCode' size=6 label='出库单' placeholder='出库单' readonly="true" icon='fa-edit' />
            </@mform.row>
        <#--<@mform.select2 id='changeId' name='changeId' label="请选择出库单号"  size=12>-->
        <#--<option value="-1">动态生成出库单</option>-->
        <#--<#list warehouseChangeList as item>-->
        <#--<option value="${item.id?c}">${item.flowCode}</option>-->
        <#--</#list>-->
        <#--</@mform.select2>-->
        </@mform.container>
        <@mform.container width="480px" >
            <div class="showImagBox">
                <img src="" class="showImag" id="show">
                <div class="imgButton">
                    <span id="bigImg">查看大图</span>
                    <span id="reload">上传外观</span>
                </div>
                <img src="" class="showImag" id="show2">
                <div class="imgButton">
                    <span id="bigImg2">查看大图</span>
                    <span id="reload2">上传铭牌</span>
                </div>
            </div>
            <div style="display: none">
                <@mform.input_file id='Img' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                 <@mform.input_file id='Img2' name='Img2' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
            </div>
        </@mform.container>
    </@modal.editModal>

</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>

    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var orgInfo =${organizationName};
        var orgSelect = $("<select id='oneOrganization' style='width:100%;'><option value='0'>请选择机构</option></select>");
        $("#orgBox").append(orgSelect);
        var orgEditSelect = $("#editForm #organizationId");
        putOptions(orgSelect, "", orgInfo.list);
        putOptions(orgEditSelect, "", orgInfo.list);

        function putOptions(orgSelect, supername, list) {
            if (supername != "") supername = supername + "-";
            for (var i = 0; i < list.length; i++) {
                orgSelect.append("<option value=" + list[i].id + ">" + supername + list[i].name + "</option>")
                if (list[i].childrenOrg.length > 0) {
                    putOptions(orgSelect, supername + list[i].name, list[i].childrenOrg);
                }
            }
        }

        orgSelect.select2();

        function getType() {
            var types1 = $("#types1").find("option:selected").text().split("-")[1];
            var types2 = $("#types2").val();
            if (types2 == null || types2 == 0)
                return types1;
            else return types2;
        }

        function typesChange() {
            $.ajax({
                type: 'POST',
                data: {
                    datas: JSON.stringify({
                        superId: $("#types1").val()
                    })
                },
                url: "${request.contextPath}/base/eqClass/queryList",
                success: function (data) {
                    var data = data.datas;
                    //成功之后
                    var box = $("#types2Box");
                    box.html("");
                    if (data.length > 0 && $("#types1").val() != 0) {
                        //动态加载下拉框
                        var select = $("<select class='form-control' id='types2')> <option value=0>选择二级分类</option> </select>");
                        for (var i = 0; i < data.length; i++) {
                            select.append("<option value='" + data[i].code + "'>" + data[i].name + "</option>");
                        }
                        box.append(select);
                        select.select2();
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            });
        }

        var now = new Date();
        $("#buyTime").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        var state = {
            <#list state as item>
                "${item.code}": "${item.name}",
            </#list>}
        var secrecyMap = {
            <#list secrecy as item>
                "${item.code}": "${item.name}",
            </#list>}
        var useType = {
            <#list useType as item>
                "${item.code}": "${item.name}",
            </#list>}
        var columns = [
            {"sWidth": "100px", "title": "机构名称", "data": "organizationName"},
            {"sWidth": "120px", "title": "资产名称", "data": "name"},
            {"sWidth": "120px", "title": "资产条形码", "data": "barCode"},
            {"sWidth": "120px", "title": "二维码", "data": "QRcode"},
            {"sWidth": "120px", "title": "身份码", "data": "certCode"},
            {"sWidth": "80px", "title": "领用时间", "data": "buyTime"},
            {"sWidth": "80px", "title": "使用方式", "data": "useType"},
            {"sWidth": "80px", "title": "使用人", "data": "useStaffName"},
            {"sWidth": "80px", "title": "密保级别", "data": "secrecy"},
            {"sWidth": "80px", "title": "新增时间", "data": "createTime"},
            {"sWidth": "80px", "title": "新增人", "data": "createName"},
            {"sWidth": "80px", "title": "修改时间", "data": "updateTime"},
            {"sWidth": "80px", "title": "修改人", "data": "updateName"},
            {"sWidth": "80px", "title": "状态", "data": "state"}

        ]

        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            pageLength: 10,
            fixedHeader: false,
            searching: true,
            ordering: false,
            "order": [[8, "desc"]],
            buttons: [],
            "rowCallback": function (row, data, index) {
                $('td', row).eq(5).html(data.buyTime.substr(0, 10));
                $('td', row).eq(6).html(useType[data.useType]);
                $('td', row).eq(8).html(secrecyMap[data.secrecy]);
                $('td', row).eq(13).html(state[data.state]);
            }
        });
        $("#show").on("click", function () {
            $("#Img").trigger("click")
        })
        $("#show2").on("click", function () {
            $("#Img2").trigger("click")
        })
        $("#reload").on("click", function () {
            $("#Img").trigger("click")
        })
        $("#reload2").on("click", function () {
            $("#Img2").trigger("click")
        })
        $("#bigImg").on("click", function () {
            if ($("#show").attr("src") != null && $("#show").attr("src") != "") {
                var big = $("<div style='position: absolute;top:0px;left:0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); text-align: center;z-index: 9999;'><img style='margin-top:20px;max-width: 80%;max-height:80%;' src='" + $("#show").attr("src") + "'/></div>")
                $("body").append(big);
                big.on("click", function () {
                    big.children().remove();
                    big.remove();
                })
            }

        })
        $("#bigImg2").on("click", function () {
            if ($("#show2").attr("src") != null && $("#show2").attr("src") != "") {
                var big = $("<div style='position: absolute;top:0px;left:0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); text-align: center;z-index: 9999;'><img style='margin-top:20px;max-width: 80%;max-height:80%;' src='" + $("#show2").attr("src") + "'/></div>")
                $("body").append(big);
                big.on("click", function () {
                    big.children().remove();
                    big.remove();
                })
            }

        })
        $("#Img").on("change", function () {
            //获取文件  
            var file = $("#Img")[0].files;
            imgZip(file, $("#show"), 800, 800);
        })
        $("#Img2").on("change", function () {
            //获取文件  
            var file = $("#Img2")[0].files;
            imgZip(file, $("#show2"), 800, 800);
        })

        function newdetail() {
            $('#modal-detail').find(".modal-title").text('新增');
            clearForm($('#modal-detail'));
            $("#show").attr("src", "");
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
            $('#modal-detail').modal();
        }

        $("#brandCode").bind("change", loadModel);
        $("#oneCode").bind("change", loadModel);
        //根据表单生成资产身份码
        $("#useType").bind("change", changeCertCode);
        $("#oneCode").bind("change", changeCertCode);
        $("#useStaffId").bind("change", changeCertCode);

        function changeCertCode() {
            var certCode = "";
            var useType = $("#useType").val().substr(4);//取得后两位
            var useStaffId = $("#select2-useStaffId-container").html().split(" ")[1];
            var oneCode = $("#oneCode").val();
            certCode = useType + "-" + useStaffId + "-" + oneCode;
            $("#certCode").val(certCode);
        }

        function loadModel(initValue) {
            $.ajax({
                type: 'POST',
                data: {
                    datas: JSON.stringify({
                        oneCode: $("#oneCode").val(),
                        brandCode: $("#brandCode").val()
                    })
                },
                url: '${request.contextPath}/busi/equipment/use/queryModel',
                success: function (data) {
                    //成功之后
                    $("#modelId").children().remove();
                    var optionDefault = $("<option value='0'>请选择</option>");
                    $("#modelId").append(optionDefault);
                    if (data.success) {
                        $(data.datas).each(function (index, item) {
                            var option = $("<option value='" + item.id + "'>" + item.name + (item.code ? ("-" + item.code) : "") + "</option>");
                            $("#modelId").append(option);
                        })
                        $("#modelId").val(initValue);
                        $('#select2-model-container').html($("#modelId").find("option:selected").text());
                    }
                    else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            })
        }


        function editdetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var $modal = $("#modal-detail");
            $modal.find(".modal-title").text("修改信息");
            clearForm($modal);
            var data = datas[0];
            var model = data.model;
            $modal.find("#modelId").val(model);
            if ($modal.find("#QRCode").find("[value='" + data.QRCode + "']").length < 1) {
                $($modal.find("#QRCode").children().get(0)).after("<option value='" + data.QRCode + "'>" + data.QRcode + "</option>")
            }
            initFormItemData($("#editForm"), data);
            loadModel(data.modelId);
            $("#show").attr("src", data.externalPhotos);
            $("#show2").attr("src", data.nameplatePhoto);
            if (datas[0].changeType != "333100") {
                swal("提醒", "您现在修改的数据为非初始化出库数据，部分字段的修改将无法生效！", "warning");
            }
            $modal.modal();
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
        }

        function refreshData() {
            var data = {
                datas: JSON.stringify({
                    type: getType(),
                    useType: $("#useTypes").val(),
                    brand: $("#brand").val(),
                    oneOrganization: $("#oneOrganization").val(),
                    name: $("#name").val()
                })
            }
            mainTable.queryData("${request.contextPath}/busi/equipment/use/queryList", data);
        }

        refreshData();

        function savedetail() {
            swal({
                title: "确定保存",
                text: "是否确定保存此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = $("#editForm form").serializeJSON();
                var scoreImg = $("#show").attr("src");
                var scoreImg2 = $("#show2").attr("src");
                if (scoreImg.startsWith("data:image")) {
                    requestData.externalPhotos = scoreImg;
                } else {
                    requestData.externalPhotos = "";
                }
                if (scoreImg2.startsWith("data:image")) {
                    requestData.nameplatePhoto = scoreImg2;
                } else {
                    requestData.nameplatePhoto = "";
                }
                requestData.model = $("#select2-modelId-container").html();
                requestData.source = "124001";
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/busi/equipment/use/save',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                $("#modal-detail").modal('hide');
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }

        function deldetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var data = datas[0];
            swal({
                title: "确定删除",
                text: "是否确定删除此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = {
                    id: data.id
                };
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/busi/equipment/use/delete',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }

        function showMobile() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var data = datas[0];
            window.open("${request.contextPath}/edetail/" + data.QRcode)
        }

        function exportQRcode() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0) {
                swal("错误", "请选择数据", "error");
                return;
            }
            var codes = "";
            var certcodes = "";
            for (var i = 0; i < datas.length; i++) {
                codes += ("," + datas[i].QRcode);
                certcodes += ("," + datas[i].certCode);
            }
            window.open("/QRcode/information/print/" + codes.substr(1) + "/" + certcodes.substr(1));
        }
    </script>
</@layout.foot>
</body>
</html>